<template>
  <el-container id="DDetails">
    <el-container class="cla_left">
      <el-header class="l_head" width="100%" height="10%">
        <el-row>
          <el-col :span="2" style="line-height: 40px">运单号:</el-col>
          <el-col :span="10">
            <el-input placeholder="请输入单号查询" v-model="selectDocument">
              <el-button slot="append" icon="el-icon-search" @click="selectDocBtn"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="l_body" width="100%" height="90%">
        <el-row :gutter="20">
          <el-col :span="2.5" style="line-height: 40px">始发地：</el-col>
          <el-col :span="4">
            <el-input v-model="docForm.docStart" clearable disabled></el-input>
          </el-col>
          <el-col :span="2.5" style="line-height: 40px">目的地：</el-col>
          <el-col :span="4">
            <el-cascader v-model="docForm.docEnd" placeholder="目的地" :options="allProvince" filterable :show-all-levels="false"></el-cascader>
          </el-col>
          <el-col :span="2" style="line-height:40px">开单员:</el-col>
          <el-col :span="3">
            <el-input disabled v-model="docForm.empName"></el-input>
          </el-col>
          <el-col :span="6">
            付款方式:
            <el-radio-group v-model="docForm.payment">
              <el-radio-button label="已付"></el-radio-button>
              <el-radio-button label="到付"></el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2" style="line-height:40px"><p>托运人:</p></el-col>
          <el-col :span="4">
            <el-input clearable v-model="docForm.sinpper" disabled></el-input>
          </el-col>
          <el-col :span="3" style="line-height:40px"> <p>托运人电话:</p></el-col>
          <el-col :span="4">
            <el-input clearable v-model="docForm.sinTel" disabled></el-input>
          </el-col>
          <el-col :span="10">
            交货方式:
            <el-radio-group v-model="docForm.delivery" disabled>
              <el-radio-button label="自提"></el-radio-button>
              <el-radio-button label="送货"></el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3" style="line-height:40px"><p>送货地址:</p></el-col>
          <el-col :span="10">
            <el-input clearable v-model="docForm.deliveryAddr" disabled></el-input>
          </el-col>
          <el-col :span="2" style="line-height:40px"><p>备注:</p></el-col>
          <el-col :span="6">
            <el-input clearable v-model="docForm.remark"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2" style="line-height:40px">
            <p>收货人:</p>
          </el-col>
          <el-col :span="4">
            <el-input clearable v-model="docForm.consignee"></el-input>
          </el-col>
          <el-col :span="3" style="line-height:40px">
            <p>收货人电话:</p>
          </el-col>
          <el-col :span="4">
            <el-input clearable v-model="docForm.conTel"></el-input>
          </el-col>
          <el-col :span="2" style="line-height:40px">
            <p>包装费:</p>
          </el-col>
          <el-col :span="3">
            <el-input clearable v-model="docForm.packCost" disabled></el-input>
          </el-col>
          <el-col :span="2" style="line-height:40px" v-if="docForm.delivery=='送货'">
            <p>送货费:</p>
          </el-col>
          <el-col :span="3">
            <el-input clearable v-model="docForm.deliCost" v-if="docForm.delivery=='送货'" disabled></el-input>
          </el-col>
        </el-row>
        <table class="cargoList">
          <thead>
          <tr>
            <td>名称</td>
            <td>包装</td>
            <td>数量</td>
            <td>总体积</td>
            <td>总重量</td>
            <td>总价值</td>
            <td>保价费</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(cargo,index) in cargoData" :key="index">
            <td><input v-model="cargo.cargoName" disabled></td>
            <td><input v-model="cargo.cargoPack" disabled></td>
            <td><input v-model="cargo.num" disabled></td>
            <td><input v-model="cargo.weight" disabled></td>
            <td><input v-model="cargo.bulk" disabled></td>
            <td><input v-model="cargo.price" disabled></td>
            <td :rowspan="cargoData.length" v-if="index ==0">
              <input v-model="docForm.support" disabled>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <span>创建时间：</span>
              <span>{{docForm.docDate}}</span>
            </td>
            <td style="border-right:none">
              基础运费:
            </td>
            <td style="border-left:none">
              <input v-model="docForm.freight">
            </td>
            <td style="border-right:none">
              总运费:
            </td>
            <td style="border-left:none">
              {{totalCost}}
            </td>
          </tr>
          </tbody>
        </table>
        <el-row :gutter="20" style="margin-bottom:0">
          <el-col :span="1.5" class="height40">
            状态:
          </el-col>
          <el-col :span="4">
            <el-select v-model="docForm.state" placeholder="请选择">
              <el-option style="color:red" label="异常" value="运单异常"></el-option>
              <el-option style="color:red" label="撤销" value="运单撤销"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2.5" class="height40">
            状态信息:
          </el-col>
          <el-col :span="4">
            <el-input v-model="docForm.stateInfo" clearable></el-input>
          </el-col>
          <el-col :span="2" :offset="8" v-if="docForm.state!= '已签收'">
            <el-button type="primary" icon="el-icon-document-checked" @click="updateDoc">修改运单</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-aside class="cla_right" style="height:550px">
      <p>物流信息:</p>
      <el-timeline>
        <el-timeline-item v-for="(logInfo,index) of this.docForm.logInfos" 
          :key="logInfo.disTime" 
          :timestamp="logInfo.disTime" 
          placement="top">
          <el-card>
            <p>{{logInfo.newSite + logInfo.state}}</p>
            <p v-if="logInfo.endSite != null">{{'下一站点' + logInfo.endSite}}</p>
            <p v-if="index == 0 && docForm.state != '运转中'">{{docForm.state}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-aside>
  </el-container>
</template>

<script>
  import {getDocumentById,updDoc} from 'network/document'
  import {getEmpById} from 'network/employee'

  export default {
    name: 'DDetails',
    data() {
      return {
        selectDocument: this.$route.params.docId,
        //运单数据
        docForm: {
          empName: '',
          empId: '',
          docDate: '',
          docStart: '', //起运地
          docEnd: '',  //目的地
          sinpper: '',  //托运人
          sinTel: '',   //托运人电话
          consignee: '',  //收货人
          conTel: '', //收货人电话
          payment: '', //付款方式:已付,到付
          delivery: '', //交货方式:自提,送货
          deliveryAddr: '', //送货地址
          packCost: 0,  //包装费
          deliCost: 0,  //送货费
          support: 0, //保价费
          freight: 0, //基础运费
          remark: '', //备注信息
          state: '',  //状态
          stateInfo: '',  //状态相关信息
        },
        //运单货物数据
        cargoData: [{cargoName: '', cargoPack: '', num: 0, weight: 0, bulk: 0, price: 0},
          {cargoName: '', cargoPack: '', num: 0, weight: 0, bulk: 0, price: 0}]
      }
    },
    computed: {
      //总运费
      totalCost() {
        let total = 0
        if (this.docForm.delivery == '送货') {
          total += this.docForm.deliCost * 1
        }
        if (this.isSupport == 'true') {
          total += this.support * 1
        }
        total = total * 1 + this.docForm.freight * 1 + this.docForm.packCost * 1
        return total
      },
      //获取目的地三级联动列表
      allProvince() {
        //创建4级列表数组
        let options = []
        //从vuex取出所有省市区
        //循环遍历省份
        this.$store.state.modules.proCityArea.province.forEach((pro,index) => {
          //循环把省份放进列表第一层
          options.push({label:pro.proName,children: []})
           //循环把省份的城市放进列表第二层
          pro.citys.forEach((city,ind) => {
            options[index].children.push({value:city.cityName,label:city.cityName,children: []})
            //循环把城市的地区放进列表第三层
            city.areas.forEach((area,i) => {
              options[index].children[ind].children.push({label:area.areaName,children: []})
              //循环把地区的站点放进列表第四层
              area.sitetbs.forEach((site) => {
                options[index].children[ind].children[i].children.push({value:site.siteName,label:site.siteName})
              })
            })
          })
        })
        return options
      },
    },
    created() {
      if(this.$route.params.docId != 0) {
        getDocumentById(this.$route.params.docId).then(res => {
          if(res.docId != '' && res.docId != null){
            this.docForm = res
            this.cargoData = res.cargos
            getEmpById(res.empId).then(emp => {
              this.$set(this.docForm,'empName',emp.empName);
            })
          }else{
            this.$message({
              showClose: true,
              message: '运单不存在',
              type: 'error',
              duration: 1500
            })
          }
        }).catch(err => {
          this.$message({
            showClose: true,
            message: '运单不存在',
            type: 'error',
            duration: 1500
          })
          console.log(err)
        })
      }
    },
    methods: {
      clearInput() {
        this.docForm = this.$options.data().docForm
        this.cargoData = this.$options.data().cargoData
      },
      selectDocBtn() {
        getDocumentById(this.selectDocument).then(res => {
          if(res.docId != '' && res.docId != null){
            this.docForm = res
            this.cargoData = res.cargos
            getEmpById(res.empId).then(emp => {
              this.$set(this.docForm,'empName',emp.empName);
            })
          }else {
            this.$message({
              showClose: true,
              message: '运单不存在',
              type: 'error',
              duration: 1500
            })
          }
        }).catch(err => {
          console.log(err)
          this.$message({
            showClose: true,
            message: '运单不存在',
            type: 'error',
            duration: 1500
          })
        })
      },
      updateDoc() {
        let doc = {}
        doc.docId = this.selectDocument
        doc.payment = this.docForm.payment
        if(typeof this.docForm.docEnd != "string") {
          doc.docEnd = this.docForm.docEnd[3]
        }else {
          doc.docEnd = this.docForm.docEnd
        }
        doc.consignee = this.docForm.consignee
        doc.conTel = this.docForm.conTel
        doc.remark = this.docForm.remark
        if(this.docForm.state == "运单异常") {
          doc.state = "运单异常"
        }else if(this.docForm.state == "运单撤销") {
          doc.state = "运单撤销"
        }else{
          if(doc.docEnd == this.docForm.logInfos[0].newSite && this.docForm.logInfos[0].state == "已收货") {
            if(this.docForm.delivery == "送货"){
              doc.state = "待配送"
            }else {
              doc.state = "待自提"
            }
          }else {
            doc.state = "运转中"
          }
        }
        if(this.docForm.stateInfo != '' && this.docForm.stateInfo != null) {
          doc.stateInfo = this.docForm.stateInfo
        }
        doc.docStart = JSON.parse(sessionStorage.loginAccount).sitetb.siteName
        updDoc(doc).then(res => {
          if(res > 0) {
            this.selectDocBtn()
          }
        })
        this.$message({
          showClose: true,
          message: '运单修改成功',
          type: 'success',
          duration: 1500
        })
        this.$store.dispatch('setDocument',JSON.parse(sessionStorage.loginAccount).sitetb.siteName)
      }
    }
  }
</script>

<style scoped>
  #DDetails {
    width: 100%;
    height: 100%;
  }

  .cla_left {
    width: 80%;
    height: 100%;
  }

  .cla_right {
    width: 20%;
    height: 100%;
  }

  .l_body {
    font-size: 15px;
  }


  .docAdd {
    width: 100%;
    height: 100%;
  }

  .el-row {
    margin-bottom: 3%;
  }

  .cargoList {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
    text-align: center;
  }

  .cargoList td {
    border: 0.01em solid rgb(207, 215, 229);
    width: 11%;
    height: 35px;
    line-height: 30px;
    padding: 0 10px;
  }

  .cargoList td input {
    border: none;
    outline: none;
    text-align: center;
    width: 80%;
  }
</style>
